<template>
  <div class="ProjectType-container">
    <v-row class="table-wrap" no-gutters>
      <v-col class="box" :cols="2">
        <v-skeleton-loader
          v-if="projectLoading"
          height="100%"
          type="list-item@20"
        ></v-skeleton-loader>
        <Table
          v-else
          @add="openAddEditProject"
          @edit="openAddEditProject"
          @delete="openDeleteProject"
          :headers="projectTableHeaders"
          :items="projectItems"
          addTooltip="Add Project"
          editTooltip="Edit Project"
          deleteTooltip="Delete Project"
          hide-default-footer
        >
        </Table>
      </v-col>
      <v-col class="box" :cols="10">
        <v-skeleton-loader
          v-if="jobLoading"
          height="100%"
          type="list-item@20"
        ></v-skeleton-loader>
        <Table
          v-else
          @add="openAddEditJob"
          @edit="openAddEditJob"
          @delete="openDeleteJob"
          :headers="jobTableHeaders"
          :items="jobItems"
          addTooltip="Add Job"
          editTooltip="Edit Job"
          deleteTooltip="Delete Job"
          hide-default-footer
        >
        </Table>
      </v-col>
    </v-row>
    <Dialog
      v-model="showDialog"
      @submit="save"
      :width="[3, 4].includes(step) ? 554 : 480"
      :show-save="step <= 4"
      :title="dialogTitle"
    >
      <addEditProject
        v-if="step === 1 || step === 2"
        ref="addEditProject"
      ></addEditProject>
      <addEditJob
        v-else-if="step === 3 || step === 4"
        ref="addEditJob"
      ></addEditJob>
      <DeleteJob
        v-else-if="step === 5 && selectedJob"
        @delete="deleteJob"
        :item="selectedJob"
      ></DeleteJob>
      <DeleteProject
        v-else-if="step === 6 && selectedProject"
        @delete="deleteProject"
        :item="selectedProject"
      ></DeleteProject>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditProject from "@/components/Maintenance/Setting/ProjectType/AddEditProject.vue";
import AddEditJob from "@/components/Maintenance/Setting/ProjectType/AddEditJob.vue";
import DeleteJob from "@/components/Maintenance/Setting/ProjectType/DeleteJob.vue";
import DeleteProject from "@/components/Maintenance/Setting/ProjectType/DeleteProject.vue";
interface IProjectItem {
  id: string;
  type: string;
  description: string;
}

interface IJobItem {
  id: string;
  type: string;
  description: string;
  estTime: number;
  PBS?: number;
  firstReminder?: number;
  secondReminder?: number;
  PIC: string;
  jobJSCode: string;
  taskJSCode: string;
  jobCodePrefix: string;
}
@Component({
  components: {
    Table,
    Dialog,
    AddEditProject,
    AddEditJob,
    DeleteJob,
    DeleteProject,
  },
})
export default class ProjectType extends Vue {
  // 1.addProject 2.EditProject 3.addJob 4.EditJob 5.DeleteJob 6.DeleteProject
  step = -1;
  // dialog
  showDialog = false;
  dialogTitle = "";
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // ProjectType
  projectLoading = false;
  selectedProject: IProjectItem | null = null;
  projectTableHeaders = [
    {
      text: "Project Type",
      sortable: false,
      value: "type",
    },
    {
      text: "Description",
      sortable: false,
      value: "description",
    },
    {
      sortable: false,
      align: "right",
      value: "action",
    },
  ];

  projectItems: IProjectItem[] = [];

  getProjectItems() {
    this.projectLoading = true;
    setTimeout(() => {
      this.projectItems = [
        {
          id: "1",
          type: "DL",
          description: "Delivery",
        },
        {
          id: "2",
          type: "SUP",
          description: "Installing",
        },
      ];
      this.projectLoading = false;
    }, 500);
  }

  openAddEditProject(item: IProjectItem | undefined) {
    if (item) {
      this.step = 2;
      this.dialogTitle = "Edit Project";
      this.selectedProject = item;
      this.$nextTick(() => {
        const addEditProjectRef = this.$refs.addEditProject as AddEditProject;
        addEditProjectRef.resetForm();
        setTimeout(() => {
          addEditProjectRef.setFormData(item);
        });
      });
    } else {
      this.step = 1;
      this.dialogTitle = "Add Project";
      this.$nextTick(() => {
        const addEditProjectRef = this.$refs.addEditProject as AddEditProject;
        addEditProjectRef.resetForm();
      });
    }
    this.openDialog();
  }

  openDeleteProject(item: IProjectItem) {
    this.step = 6;
    this.dialogTitle = "Delete Project";
    this.selectedProject = item;
    this.openDialog();
  }

  addProject(item: IProjectItem) {
    this.projectItems.push(item);
  }

  editProject(project: IProjectItem, item: IProjectItem) {
    console.log(project, item);
    Object.assign(project, item);
  }

  deleteProject(item: IProjectItem) {
    const index = this.projectItems.indexOf(item);
    this.projectItems.splice(index, 1);
    this.closeDialog();
  }

  // job
  jobLoading = false;
  selectedJob: IJobItem | null = null;
  jobTableHeaders = [
    {
      text: "Job Type",
      sortable: false,
      value: "type",
    },
    {
      text: "Type Description",
      sortable: false,
      value: "description",
    },
    {
      align: "center",
      text: "Est Time(min)",
      sortable: false,
      value: "estTime",
    },
    {
      align: "center",
      text: "Prompt before starting (min)",
      sortable: false,
      value: "PBS",
    },
    {
      align: "center",
      text: "First reminder",
      sortable: false,
      value: "firstReminder",
    },
    {
      align: "center",
      text: "Second reminder",
      sortable: false,
      value: "secondReminder",
    },
    {
      align: "center",
      text: "PIC",
      sortable: false,
      value: "PIC",
    },
    {
      align: "center",
      text: "Job JS code",
      sortable: false,
      value: "jobJSCode",
    },
    {
      align: "center",
      text: "Task JS code",
      sortable: false,
      value: "taskJSCode",
    },
    {
      align: "center",
      text: "Job Code Prefix",
      sortable: false,
      value: "jobCodePrefix",
    },
    {
      sortable: false,
      align: "right",
      value: "action",
    },
  ];

  jobItems: IJobItem[] = [];

  getJobItems() {
    this.jobLoading = true;
    setTimeout(() => {
      this.jobItems = [
        {
          id: "1",
          type: "DL",
          description: "Delivery",
          estTime: 90,
          PBS: 90,
          firstReminder: 10,
          secondReminder: 10,
          PIC: "User 1",
          jobJSCode: "JS-2101001",
          taskJSCode: "JS-2101001",
          jobCodePrefix: "DL",
        },
        {
          id: "2",
          type: "CAL",
          description: "Testing for Cal",
          estTime: 30,
          PBS: 30,
          firstReminder: 10,
          secondReminder: 10,
          PIC: "Admin",
          jobJSCode: "JS-2101001",
          taskJSCode: "JS-2101001",
          jobCodePrefix: "CAL",
        },
        {
          id: "3",
          type: "DN",
          description: "Delivery and Install",
          estTime: 120,
          PIC: "Admin 2",
          jobJSCode: "JS-2101001",
          taskJSCode: "JS-2101001",
          jobCodePrefix: "DN",
        },
      ];
      this.jobLoading = false;
    }, 1000);
  }

  openAddEditJob(item: IJobItem | undefined) {
    if (item) {
      this.step = 4;
      this.dialogTitle = "Edit Job";
      this.selectedJob = item;
      this.$nextTick(() => {
        const addEditJobRef = this.$refs.addEditJob as AddEditJob;
        addEditJobRef.resetForm();
        setTimeout(() => {
          addEditJobRef.setFormData(item);
        }, 0);
      });
    } else {
      this.step = 3;
      this.dialogTitle = "Add Job";
      this.$nextTick(() => {
        const addEditJobRef = this.$refs.addEditJob as AddEditJob;
        addEditJobRef.resetForm();
      });
    }
    this.openDialog();
  }

  openDeleteJob(item: IJobItem) {
    this.step = 5;
    this.dialogTitle = "Delete Job";
    this.selectedJob = item;
    this.openDialog();
  }

  addJob(item: IJobItem) {
    this.jobItems.push(item);
  }

  editJob(job: IJobItem, item: IJobItem) {
    Object.assign(job, item);
  }

  deleteJob(item: IJobItem) {
    const index = this.jobItems.indexOf(item);
    this.jobItems.splice(index, 1);
    this.closeDialog();
  }

  async save() {
    let addEditRef: AddEditProject | AddEditJob | null = null;
    if ([1, 2].includes(this.step)) {
      addEditRef = this.$refs.addEditProject as AddEditProject;
    } else if ([3, 4].includes(this.step)) {
      addEditRef = this.$refs.addEditJob as AddEditJob;
    }
    if (addEditRef) {
      const result = await addEditRef.validateFormData();
      if (result) {
        if ([1, 3].includes(this.step)) {
          // Add
          result.id = String(new Date().getTime());
          if (this.step === 1) {
            // Add Project
            this.addProject(result as IProjectItem);
          } else {
            // Add Job
            this.addJob(result as IJobItem);
          }
        } else if ([2, 4].includes(this.step)) {
          // Edit
          if (this.step === 2) {
            // Edit Project
            this.editProject(
              this.selectedProject as IProjectItem,
              result as IProjectItem
            );
            this.selectedProject = null;
          } else {
            // Edit Job
            this.editJob(this.selectedJob as IJobItem, result as IJobItem);
            this.selectedJob = null;
          }
        }
        this.closeDialog();
      }
    }
  }

  created() {
    this.getProjectItems();
    this.getJobItems();
  }

  mounted() {
    this.$store.commit("MaintenanceStore/closeActionIcon");
  }
}
</script>

<style lang="scss" scoped>
@import "./ProjectType.scss";
</style>
